﻿@page "/FFmpegVideoPlayerTest"

@using FFmpegBlazor
@using System.IO
@inject IJSRuntime JSRuntime

<style>
    .player-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .control-panel {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 25px;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .input-group, .stream-type {
        margin-bottom: 15px;
    }

    .control-panel label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: white;
        font-size: 14px;
    }

    .control-panel input,
    .control-panel select {
        width: 100%;
        padding: 12px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        font-size: 14px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s;
    }

        .control-panel input:focus,
        .control-panel select:focus {
            outline: none;
            border-color: white;
            background: white;
        }

    .button-group {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    button {
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        flex: 1;
        min-width: 120px;
    }

    .btn-primary {
        background: #10b981;
        color: white;
    }

        .btn-primary:hover:not(:disabled) {
            background: #059669;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }

    .btn-danger {
        background: #ef4444;
        color: white;
    }

        .btn-danger:hover:not(:disabled) {
            background: #dc2626;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }

    .btn-secondary {
        background: #6b7280;
        color: white;
    }

        .btn-secondary:hover:not(:disabled) {
            background: #4b5563;
            transform: translateY(-2px);
        }

    button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

    .video-wrapper {
        background: #000;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        text-align: center;
    }

    .info-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    @@media (max-width: 768px) {
        .info-panel {
            grid-template-columns: 1fr;
        }
    }

    .status-section, .stats-section {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

        .status-section h4, .stats-section h4 {
            margin: 0 0 15px 0;
            color: #333;
            font-size: 16px;
        }

    .status-item {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #e5e7eb;
    }

        .status-item:last-child {
            border-bottom: none;
        }

        .status-item .label {
            font-weight: 600;
            color: #6b7280;
        }

        .status-item .value {
            font-weight: 500;
            color: #111827;
        }

    .status-就绪 {
        color: #6b7280 !important;
    }

    .status-连接中 {
        color: #f59e0b !important;
    }

    .status-播放中 {
        color: #10b981 !important;
    }

    .status-已暂停 {
        color: #3b82f6 !important;
    }

    .status-已停止 {
        color: #6b7280 !important;
    }

    .status-错误 {
        color: #ef4444 !important;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .stat-item {
        background: white;
        padding: 12px;
        border-radius: 8px;
        text-align: center;
    }

    .stat-label {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 5px;
    }

    .stat-value {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

    .error-message {
        grid-column: 1 / -1;
        background: #fee2e2;
        color: #991b1b;
        padding: 15px;
        border-radius: 8px;
        border-left: 4px solid #ef4444;
    }

    .examples-section {
        background: #eff6ff;
        padding: 25px;
        border-radius: 12px;
        border-left: 4px solid #3b82f6;
    }

        .examples-section h4 {
            margin: 0 0 15px 0;
            color: #1e40af;
        }

        .examples-section ul {
            margin: 10px 0;
            padding-left: 20px;
            color: #1e40af;
        }

        .examples-section li {
            margin: 8px 0;
            line-height: 1.6;
        }

    .example-urls {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 15px 0;
    }

        .example-urls code {
            background: white;
            padding: 12px;
            border-radius: 6px;
            font-size: 13px;
            color: #be185d;
            border: 1px solid #dbeafe;
            display: block;
        }

    .note {
        margin-top: 15px;
        padding: 12px;
        background: #fef3c7;
        border-radius: 6px;
        color: #92400e;
        font-size: 14px;
    }
</style>

<h3>FLV 直接播放器</h3>

<XiaoFengBlazor.Components.VideoPlayer MineType=XiaoFengBlazor.Components.EnumVideoType.flv
             Url="http://10.200.100.130:5008/live/stream.flv"
             Width="400"
             Height="300"
             Autoplay="true"
             Liveui=true
             VideoJsPath="./video/video.min.js"
             CssPath="./video/video-js.min.css" />


<script src="https://cdn.jsdelivr.net/npm/flv.js@latest/dist/flv.min.js"></script>
<script src="./flv.min.js"></script>

@code {
  
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
           
        }
    }
}
